<template>
  <el-dialog v-dialogDrag :title="title" :visible.sync="editDialog" width="40%">
    <el-form :model="user" :rules="rules" ref="editForm">
      <el-form-item style="margin-left: 30px;">
        <el-alert
          :closable="false"
          title="提示信息"
          type="info"
          description="用户创建的初始密码为 flypig"
          show-icon
        ></el-alert>
      </el-form-item>
      <el-form-item label="用户名称" :label-width="formLabelWidth" prop="uName">
        <el-input v-model="user.uName" autocomplete="off"></el-input>
      </el-form-item>
      <!-- <el-form-item label="用户密码" :label-width="formLabelWidth">
        <el-input v-model="dept.code" autocomplete="off"></el-input>
      </el-form-item>-->
      <!-- 此处有一个element-ui官方bug，select选择器添加校验规则会校验失败，故此处设置默认值，https://github.com/ElemeFE/element/issues/674 -->
      <el-form-item label="角色" :label-width="formLabelWidth">
        <el-select v-model="user.uType" placeholder="请选择角色">
          <el-option label="管理员" value="1"></el-option>
          <el-option label="普通用户" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="联系方式" :label-width="formLabelWidth">
        <el-input v-model="user.uContact" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" :label-width="formLabelWidth">
        <el-input v-model="user.uEmail" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="备注" :label-width="formLabelWidth">
        <el-input v-model="user.uRemark" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="editDialog = false">取 消</el-button>
      <el-button type="primary" @click="isEdit ? updateUser('editForm') : saveUser('editForm')">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { mapGetters } from "vuex";
import accountApi from "@/api/account";
import userApi from "@/api/user";
export default {
  data() {
    return {
      isEdit: false, // 是否为编辑状态，默认为false，即默认为新增
      formLabelWidth: "100px",
      editDialog: false,
      user: {
        uType: "2"
      },
      title: "",
      rules: {
        uName: [
          { required: true, message: "请输入用户名称", trigger: "blur" },
          {
            min: 4,
            max: 20,
            message: "长度需在4 到 20个字符之间",
            trigger: "blur"
          }
        ],
        uroles: [
          { required: true, message: "请选择用户角色", trigger: "change" }
        ]
      }
    };
  },

  computed: {
      ...mapGetters(["name"])
  },

  watch: {
    "user.uType": function(newValue) {
      console.log("uType:", newValue);
    }
  },

  methods: {
    saveUser(formName) {
      this.user.uNickname = "新用户";
      this.$refs[formName].validate(valid => {
        if (valid) {
          // 先判断用户名是否重复
          userApi.queryUserName(this.user.uName).then(resp => {
            if (resp.data.msg > 0) {
              // 用户名存在
              this.$message({
                message: "该用户名已存在",
                type: "warning"
              });
              return false;
            } else {
              accountApi.registerUser(this.user).then(resp => {
                if (resp.data.code == 0) {
                  // 注册成功
                  this.$message({
                    message: "注册成功",
                    type: "success"
                  });
                  // 调用父组件的方法
                  this.$parent.fetchData();
                  this.editDialog = false;
                  this.user = {
                    uType: "2"
                  };
                } else {
                  this.$message({
                    message: "注册失败",
                    type: "warning"
                  });
                }
              });
            }
          });
        } else {
          this.$message({
            message: "校验失败",
            type: "warning"
          });
        }
      });
    },

    updateUser(formName) {
      console.log("更新",this.name,"---------",this.user.uName);
      this.$refs[formName].validate(valid => {
        if (valid) {
          // 先判断用户名是否重复
          userApi.queryUserName(this.user.uName).then(resp => {
            if (resp.data.msg > 0 && (this.user.uName == this.name)) {
              // 用户名存在
              this.$message({
                message: "该用户名已存在",
                type: "warning"
              });
              return false;
            } else {
              accountApi.updateUser(this.user).then(resp => {
                if (resp.data.code == 0) {
                  // 注册成功
                  this.$message({
                    message: "更新用户成功",
                    type: "success"
                  });
                  this.$parent.fetchData();
                  this.editDialog = false;
                  this.user = {
                    uType: "2"
                  };
                } else {
                  this.$message({
                    message: "更新失败",
                    type: "warning"
                  });
                }
              });
            }
          });
        } else {
          this.$message({
            message: "校验失败",
            type: "warning"
          });
        }
      });
    }
  }
};
</script>

<style lang="css" >
.el-dialog {
  max-height: calc(100% - 200px);
  /* max-height: 600px; */
  display: flex;
  flex-direction: column;
}
.el-dialog__body {
  overflow: auto;
}
</style>

<style lang="css" scoped>
.el-radio__label {
  display: none;
}
.el-table >>> td {
  font-size: 13px;
}
</style>